<template>
  <el-card class="MultipleAnswer" body-style="padding:10px" shadow="hover">
    <div class="first-answer">{{ firstAnswer }}</div>
    <el-collapse accordion @change="handleCollapseChange">
      <el-collapse-item
        title="路径结果"
        name="pathAnswer"
        v-if="pathAnswerArr.length > 0"
      >
        <div class="pathAnswer" v-for="item in pathAnswerArr" :key="item">
          {{ item }}
        </div>
      </el-collapse-item>
      <el-collapse-item title="相关问题" name="recommend" :key="refreshRecommendKey">
        <div v-if="Array.from(recommendList).length > 0">
          <div class="aboutQuestion" v-for="item in recommendList" :key="item" @click="$emit('to-rec', item)">
            {{ item }}
          </div>
        </div>
        <div class="aboutQuestion" v-if="Array.from(recommendList).length === 0 && !loading.recommend">
          没有相关问题推荐
        </div>
        <div v-if="loading.recommend">
          <el-icon class="el-icon-loading"/>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script>
import { askForRecommendAPI } from "@/api/kfqa/kgqa";

export default {
  name: "MultipleAnswer",
  props: ["answer"],
  data() {
    return {
      kg: {},
      firstAnswer: "",
      pathAnswerArr: [],
      sentenceList: [],
      recommendList: new Set(),
      refreshRecommendKey: Symbol(),
      loading: {
        recommend: false
      },
      recommendAsked: false //是否已经请求过问题推荐
    };
  },
  created() {
    this.kg = this.answer.content.kg;
    this.sentenceList = this.answer.content.itemList;
    // this.recommendList = new Set();
    this.firstAnswer = this.getAnswerStr(this.sentenceList[0]);
    this.assignAnswer();
  },
  mounted() {},
  methods: {
    handleCollapseChange(name) {
      if (name === "recommend") {
        this.getRecommend();
      }
    },
    getRecommend() {
      if (this.recommendAsked) return;
      this.loading.recommend = true;
      let requestCount = 0;
      this.sentenceList.forEach(sentence => {
        askForRecommendAPI({
            uri: sentence.subject.uri
          },
          res => {
            res.forEach(recommend => {
              this.recommendList.add(recommend);
            });
            this.refreshRecommendKey = Symbol();
          },
          () => {},
          () => {
            if (--requestCount <= 0) {
              this.loading.recommend = false;
              this.recommendAsked = true;
            }
          }
        );
        requestCount++;
        askForRecommendAPI({
            uri: sentence.subject.uri
          },
          res => {
            res.forEach(recommend => {
              this.recommendList.add(recommend);
            });
            this.refreshRecommendKey = Symbol();
          },
          () => {},
          () => {
            if (--requestCount <= 0) {
              this.loading.recommend = false;
              this.recommendAsked = true;
            }
          }
        );
        requestCount++;
      });
    },
    assignAnswer() {
      this.pathAnswerArr = [];
      for (let i = 1; i < this.sentenceList.length; i++) {
        this.pathAnswerArr.push(this.getAnswerStr(this.sentenceList[1]));
      }
    },
    getAnswerStr(item) {
      return (
        item.subject.label_ZH +
        " " +
        item.triple.label_ZH +
        " " +
        item.object.label_ZH
      );
    }
  }
};
</script>

<style scoped>
.MultipleAnswer {
  position: relative;
}
.first-answer {
  text-align: left;
  font-size: 15px;
  line-height: 40px;
  font-weight: bold;
}
.pathAnswer {
  text-align: left;
}
.aboutQuestion {
  text-align: left;
  line-height: 30px;
}
.aboutQuestion:hover {
  background-color: #c0c4cc;
  cursor: pointer;
}
</style>
